<div class="po-tree-view-item-header">
  @if (hasSubItems) {
    <button class="po-tree-view-item-header-button" (click)="expanded.emit($event)">
      <po-icon
        p-icon="ICON_ARROW_DOWN"
        class="po-tree-view-item-header-button-icon"
        [class.po-tree-view-item-header-button-icon-transform]="item.expanded"
      >
      </po-icon>
    </button>
  }

  @if (selectable) {
    @if (singleSelect) {
      <po-radio
        class="po-tree-view-item-header-checkbox"
        [class.po-tree-view-item-header-padding]="!hasSubItems"
        #inputRadio
        [name]="idRadio"
        [(ngModel)]="item.selected"
        [p-label]="item.label"
        [p-value]="item.value"
        [p-checked]="item.value === selectedValue"
        (p-change-selected)="selected.emit(item)"
        [p-disabled]="item.isSelectable === false"
        [p-size]="componentsSize"
      >
      </po-radio>
    } @else {
      <po-checkbox
        class="po-tree-view-item-header-checkbox"
        [class.po-tree-view-item-header-padding]="!hasSubItems"
        [p-label]="item.label"
        [(ngModel)]="item.selected"
        (p-change)="selected.emit(item)"
        [p-disabled]="item.isSelectable === false"
        [p-size]="componentsSize"
      >
      </po-checkbox>
    }
  } @else {
    <span class="po-tree-view-item-header-label" [class.po-tree-view-item-header-padding]="!hasSubItems">
      {{ item.label }}
    </span>
  }
</div>
